<template>
    <div class="register-page">
        <div class="register-container">
            <div class="register-box">
                <h2>{{ t('RegisterPage.Title') }}</h2>
                <div class="register-form">
                    <form @submit.prevent="handleRegister">
                        <!-- <div class="form-group">
                            <label>{{ t('RegisterPage.Username') }}</label>
                            <input type="text" v-model="form.username" :placeholder="t('RegisterPage.UsernamePlaceholder')" required />
                        </div> -->
                        <!-- <div class="form-group">
                            <label>{{ t('RegisterPage.Nickname') }}</label>
                            <input type="text" v-model="form.nickname" :placeholder="t('RegisterPage.NicknamePlaceholder')" required />
                        </div> -->
                        <div class="form-group">
                            <label>{{ t('RegisterPage.Email') }}</label>
                            <div class="input-with-button">
                                <input type="email" v-model="form.email" :placeholder="t('RegisterPage.EmailPlaceholder')" required />
                                <button type="button" class="verify-btn" @click="sendVerifyCode" :disabled="countdown > 0">
                                    {{ verifyButtonText }}
                                </button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>{{ t('RegisterPage.VerifyCode') }}</label>
                            <input type="text" v-model="form.ver_code" :placeholder="t('RegisterPage.VerifyCodePlaceholder')" required />
                        </div>
                            <!-- <div class="form-group">
                                <label>{{ t('RegisterPage.Phone') }}</label>
                                <input type="tel" v-model="form.tel" :placeholder="t('RegisterPage.PhonePlaceholder')" required />
                            </div> -->
                        <div class="form-group">
                            <label>{{ t('RegisterPage.Password') }}</label>
                            <input type="password" v-model="form.password" :placeholder="t('RegisterPage.PasswordPlaceholder')" required />
                        </div>
                        <div class="form-group">
                            <label>{{ t('RegisterPage.ConfirmPassword') }}</label>
                            <input type="password" v-model="form.confirmPassword" :placeholder="t('RegisterPage.ConfirmPasswordPlaceholder')" required />
                        </div>
                        <div class="agreement">
                            <input type="checkbox" id="agree" v-model="form.agreement" required />
                            <label for="agree">
                                {{ t('RegisterPage.Agreement') }}
                                <a href="#" @click.prevent="showTerms">{{ t('RegisterPage.Terms') }}</a>
                                {{ t('RegisterPage.And') }}
                                <a href="#" @click.prevent="showPrivacy">{{ t('RegisterPage.Privacy') }}</a>
                            </label>
                        </div>
                        <button type="submit" class="register-btn">{{ t('RegisterPage.RegisterButton') }}</button>
                        <div class="login-link">
                            {{ t('RegisterPage.HaveAccount') }}
                            <router-link to="/login">{{ t('RegisterPage.LoginNow') }}</router-link>
                        </div>
                    </form>
                </div>
            </div>
            <div class="welcome-section">
                <h1>{{ t('RegisterPage.Welcome') }}</h1>
                <ul class="features">
                    <li>{{ t('RegisterPage.Feature1') }}</li>
                    <li>{{ t('RegisterPage.Feature2') }}</li>
                    <li>{{ t('RegisterPage.Feature3') }}</li>
                    <li>{{ t('RegisterPage.Feature4') }}</li>
                </ul>
                <div class="preview-images flex">
                    <img src="@/assets/1.png" alt="" />
                    <img src="@/assets/2.png" alt="" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted,onUnmounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { registerApi, getEmailCodeApi } from '@/api/login'
const { t } = useI18n()
const router = useRouter()
const form = ref({
    username: '卡卡',
    nickname: 'kaka',
    email: '2312516245@qq.com',
    ver_code: '',
    tel: '15291688131',
    password: '147258369gzl',
    confirmPassword: '147258369gzl',
    agreement: false
})

const countdown = ref(0)
let timer = null

const sendVerifyCode = () => {
    // 验证邮箱格式
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(form.value.email)) {
        ElMessage.error('请输入正确的邮箱格式')
        return
    }

    // 发送验证码逻辑
    countdown.value = 60
    timer = setInterval(() => {
        countdown.value--
        if (countdown.value <= 0) {
            clearInterval(timer)
        }
    }, 1000)

    // 这里添加发送验证码的API调用
    getEmailCodeApi({ mail: form.value.email }).then(res => {
        ElMessage.success('验证码已发送到您的邮箱')
        console.log(res)
    })
}

const handleRegister = () => {
    // 表单验证
    if (!form.value.agreement) {
        ElMessage.warning('请阅读并同意服务条款和隐私政策')
        return
    }

    if (form.value.password != form.value.confirmPassword) {
        ElMessage.error('两次输入的密码不一致')
        return
    }

    // 手机号验证
    const phoneRegex = /^1[3-9]\d{9}$/
    if (!phoneRegex.test(form.value.tel)) {
        ElMessage.error('请输入正确的手机号码')
        return
    }

    // 这里添加注册API调用
    registerApi(form.value).then(res => {
      if(res.code == 200){
        ElMessage.success('注册成功')
        router.push('/login')
      }else{
        ElMessage.error('注册失败')
      }
    })
}

const showTerms = () => {
    // 显示服务条款
}

const showPrivacy = () => {
    // 显示隐私政策
}

// 计算属性用于验证码按钮文本
const verifyButtonText = computed(() => {
    return countdown.value > 0 ? countdown.value + 's' + t('RegisterPage.ResendCode', { 0: countdown.value }) : t('RegisterPage.GetCode')
})



onUnmounted(() => {
    if (timer) {
        clearInterval(timer)
    }
})
</script>

<style lang="scss" scoped>
.register-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    color: #333;
    padding: 40px 20px;
}

.register-container {
    display: flex;
    width: 90%;
    max-width: 1400px;
    min-height: 600px;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.register-box {
    flex: 0.9;
    padding: 60px;

    h2 {
        margin-bottom: 40px;
        font-size: 32px;
        text-align: center;
        font-weight: 600;
    }
}

.register-form {
    max-width: 460px;
    margin: 0 auto;

    .form-group {
        margin-bottom: 20px;

        label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
        }

        input {
            width: 100%;
            padding: 16px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;

            &:focus {
                outline: none;
                border-color: #1a73e8;
            }
        }
    }

    .input-with-button {
        display: flex;
        gap: 12px;

        input {
            flex: 1;
        }

        .verify-btn {
            padding: 0 16px;
            background: #1a73e8;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            white-space: nowrap;
            transition: background-color 0.3s;

            &:disabled {
                background: #ccc;
                cursor: not-allowed;
            }

            &:hover:not(:disabled) {
                background: #1557b0;
            }
        }
    }
}

.agreement {
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;

    input[type='checkbox'] {
        width: 18px;
        height: 18px;
    }

    a {
        color: #1a73e8;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

.register-btn {
    width: 100%;
    padding: 16px;
    background: #1a73e8;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;

    &:hover {
        background: #1557b0;
    }
}

.login-link {
    text-align: center;
    margin-top: 24px;
    font-size: 15px;

    a {
        color: #1a73e8;
        text-decoration: none;
        margin-left: 5px;
        font-weight: 500;

        &:hover {
            text-decoration: underline;
        }
    }
}

.welcome-section {
    flex: 1.1;
    padding: 60px;
    background: #1a73e8;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;

    h1 {
        margin-bottom: 40px;
        font-size: 36px;
        font-weight: 600;
        line-height: 1.3;
    }

    .features {
        list-style: none;
        padding: 0;

        li {
            margin: 20px 0;
            display: flex;
            align-items: center;
            font-size: 18px;
            line-height: 1.5;

            &:before {
                content: '✓';
                margin-right: 15px;
                font-size: 20px;
            }
        }
    }

    .preview-images {
        margin-top: 50px;
        gap: 20px;
        img {
            width: 285px;
            height: 159px;
            border-radius: 8px;
        }
    }
}

@media (max-width: 1024px) {
    .register-container {
        flex-direction: column;
        width: 95%;
    }

    .register-box,
    .welcome-section {
        flex: none;
        padding: 40px;
    }
}

@media (max-width: 480px) {
    .register-box,
    .welcome-section {
        padding: 30px 20px;
    }
}
</style>
